/**
 * 基于 ElementUI TableColumn 组件封装，配合 STableColumn 组件使用
 */
import TableColumn from "element-ui/lib/table-column";

export default {
  name: "STableColumn",
  components: { TableColumn },
  props: {
    option: {
      required: true,
      type: Object
    }
  },
  render(createElement) {
    if (this.option.type === "selection") {
      return createElement("table-column", {
        props: { ...this.option, align: "center" }
      });
    }
    if (this.option.type === 'index') {
        return createElement('table-column', {
          props: {
            ...this.option,
            label: this.option.title, align: 'center', fixed: true
          }
        })
    }

    // 创建下级节点
    const childrenNode = (this.option.children || []).map(childOption => createElement("s-table-column", {
      props: { option: childOption },
      scopedSlots: this.$scopedSlots
    }, []));

    return createElement("table-column",
      {
        props: {
          ...this.option,
          label: this.option.title,
          labelClassName: this.option.scrollFixed ? "scroll-fixed" : ""
        },
        scopedSlots: {
          default: props => {
            // console.log(props)
            // 准备内容节点
            let contentNode = null;

            // 根据配置创建内容节点
            if (this.option.slot) {
              contentNode = typeof (this.option.slot) === "string" ? this.$scopedSlots[this.option.slot]({
                row: props.row,
                $index: props.$index,
                option: this.option
              }) : this.option.slot({
                row: props.row,
                $index: props.$index,
                option: this.option
              });
            } else if (this.option.type === "progress") {
              contentNode = createElement("a-progress", {
                props: {
                  percent: props.row[this.option.dataIndex] * 100
                }
              });
            } else {
              if (props.row[this.option.dataIndex] === null || props.row[this.option.dataIndex] === undefined) {
                contentNode = createElement("div", {
                  style: {
                    color: "#bfbfbf",
                    display: "inline-block",
                    verticalAlign: "middle"
                  }
                }, "--");//暂无数据
              } else if (props.row[this.option.dataIndex] === "") {
                contentNode = createElement("div", {
                  style: {
                    display: "inline-block",
                    verticalAlign: "middle"
                  }
                }, "--");
              } else {
                contentNode = createElement("div", {
                  class: {
                    number: this.option.type === "number"
                  },
                  style: {
                    display: "inline-block",
                    maxWidth: "100%",
                    overflow: "hidden",
                    textOverflow: "ellipsis",
                    verticalAlign: "middle"
                  }
                }, props.row[this.option.dataIndex]);
              }
            }

            // 加入 tooltip 包装
            if (this.option.tooltip) {
              if (typeof (this.option.tooltip) === "string") {
                return createElement("el-tooltip", [createElement("template", {
                  slot: "content"
                }, [this.option.tooltip]), contentNode]);
              } else if (typeof (this.option.tooltip) === "object") {
                return createElement("el-tooltip", {
                  props: this.option.tooltip
                }, [createElement("template", {
                  slot: "content"
                }, [contentNode]), contentNode]);
              } else if (typeof (this.option.tooltip) === "boolean") {
                return createElement("el-tooltip", [createElement("template", {
                  slot: "content"
                }, [contentNode]), contentNode]);
              }
            } else {
              return contentNode;
            }
          },
          header: props => {
            if (this.option.headerSlot && this.$scopedSlots[this.option.headerSlot]) {
              return this.$scopedSlots[this.option.headerSlot]({
                option: this.option,
                ...props
              })
            }
            
            return this.option.title
          }
        }
      }, childrenNode);
  }
};
